liankao/src/pages/process/kdsmjd/[ykj_id].vue

<script setup>
import * as echarts from 'echarts'
import request from "~/utils/request";
import {REQUEST} from "~/utils/request";
import {user} from "~/store";
import {useRouter} from "vue-router";
const router = useRouter();
const route = useRoute();
const linkTo = (obj) => {
  router.push(obj);
};
let ykj_id = $ref('');
let ykj_name = $ref('');
let sm_id = $ref('');
let subject_id = $ref('')
let school_list = $ref([])
let subject_list = $ref([])
let tableData = $ref([])
let barSubject = $ref([]);
let barPercent = $ref([]);
let barUnusual = $ref(['缺考','学号异常','页码异常','缺考异常','客观题异常','选择题异常','判断题异常','填空题异常']);
let barUnData = $ref([40,70,100,70,70,70,80,90])
let sub_nav = [{
  id:'1',
  name:'考场进度监控'
},{
  id:'2',
  name:'异常分类监控'
}]
let cur_sub = $ref({
  id:'1',
  name:'考场进度监控'
})
function getFilterData() {
  let data = {
    ykj_id: ykj_id
  };
  request({
    url: "/yzy/ksjh/detail",
    data: data,
  }).then((res) => {
    if (res.code === '1') {
      subject_list = res.data.one_info.ykj_kskm_ex;
      school_list = res.data.one_info.ykj_lkxx_ex;
    }
  })
}
function getData() {
  let data = {
    ykj_id: ykj_id,
    sm_id: sm_id,
    subject_id: subject_id,
  };
  request({
    url: "/yzy/scan/km",
    data: data,
  }).then((res) => {
    if (res.code === '1') {
     ykj_name = res.data.ksjh.ykj_ksrwmc;
     tableData = res.data.list;
     barSubject = [];
     barPercent = [];
     tableData.forEach(item =>{
       barSubject.push(item.ze_xueke_name);
       barPercent.push(item.scan_percent);
     })
      nextTick(()=>{
        initChart();
      })

    }
  })
}
function initChart() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById('barBox'));
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        name: '学校',
        data: barSubject,
        axisTick: {
          alignWithLabel: true
        },
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '扫描进度(%)',
        nameTextStyle: {
          fontSize: 14
        }
      }
    ],
    series: [
      {
        type: 'bar',
        barWidth: '27px',
        label: {
          show: true,
          position: 'top',
          color: '#000',
          fontSize: 14
        },
        itemStyle:{
          color:'#6897FF',
          borderRadius: [16, 16, 0, 0]
        },
        data: barPercent
      }
    ]
  });
}
function initUnChart() {
  // 绘制图表
  let myChart_u = echarts.init(document.getElementById('unBox'));
  myChart_u.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        name: '考点',
        data: barUnusual,
        axisTick: {
          alignWithLabel: true
        },
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '人数（%）',
        nameTextStyle: {
          fontSize: 14
        }
      }
    ],
    series: [
      {
        type: 'bar',
        barWidth: '27px',
        label: {
          show: true,
          position: 'top',
          color: '#000',
          fontSize: 14
        },
        itemStyle:{
          color:'#6897FF',
          borderRadius: [16, 16, 0, 0]
        },
        data: barUnData
      }
    ]
  });
}
function switchSub(item) {
  cur_sub = item;
  if(item.id === '1') {
    nextTick(()=>{
      initChart();
    })

  } else {
    nextTick(()=>{
      initUnChart();
    })

  }

}
onMounted(() => {
  if (route.params.ykj_id) {
    ykj_id = route.params.ykj_id;
    getData();
    getFilterData();
  }
})

</script>
<route lang="json">
{
"meta":{
"title":"扫描批阅进度",
"breadcrumb":true
}
}
</route>
<template>
  <NavHeader/>
  <bread-crumb/>
  <div class="w-1200px m-auto">
    <div class="relative -mt-40px flex justify-end">
      <button type="button" class="back-btn" @click="linkTo({name:'process'})">返回</button>
    </div>
    <div class="mt-10px w-full bg-hex-fff py-20px px-15px">
      <h3 class="mb-20px text-16px text-center">{{ykj_name}}</h3>
      <ul class="tab-nav m-auto">
        <li @click="linkTo({name:'process-smpyjd-ykj_id',params:{ykj_id:ykj_id}})">科目扫描进度</li>
        <li class="selected">考点扫描进度</li>
        <li @click="linkTo({name:'process-pyjd-ykj_id',params:{ykj_id:ykj_id}})">批阅进度</li>
      </ul>
      <div class="mt-30px flex items-center justify-between">
        <div>
          <el-select v-model="subject_id" placeholder="全部科目" size="large" @change="getData">
            <el-option label="全部" value=""
            />
            <el-option
              v-for="item in subject_list"
              :key="item.subject_id"
              :label="item.subject_name"
              :value="item.subject_id"
            />
          </el-select>
          <el-select class="ml-20px" v-model="sm_id" placeholder="全部学校" size="large" @change="getData">
            <el-option label="全部" value=""
            />
            <el-option
              v-for="item in school_list"
              :key="item.sm_id"
              :label="item.sm_name"
              :value="item.sm_id"
            />
          </el-select>
        </div>
        <ul class="sub-nav">
          <li v-for="item in sub_nav" :class="item.id === cur_sub.id?'selected':''" @click="switchSub(item)">{{item.name}}</li>
        </ul>
      </div>
      <div v-if="cur_sub.id === '1'">
        <div id="barBox" style="height: 500px"></div>
        <table class="mt-20px data-table" cellpadding="0" cellspacing="0">
          <tr>
            <th>考点</th>
            <th>扫描<br>进度</th>
            <th>学生数</th>
            <th>扫描数</th>
            <th>缺考数</th>
            <th>学号<br>异常数</th>
            <th>页码<br>异常数</th>
            <th>缺考<br>异常数</th>
            <th>客观题<br>异常数</th>
            <th>选择题<br>异常数</th>
            <th>判断题<br>异常数</th>
            <th>填空题<br>异常数</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in tableData">
            <td>{{item.ze_xueke_name}}</td>
            <td>{{item.scan_percent}}</td>
            <td>{{item.student_num}}</td>
            <td>{{item.scan_num}}</td>
            <td>{{item.qks}}</td>
            <td>{{item.xhycs}}</td>
            <td>{{item.ymycs}}</td>
            <td>{{item.qkycs}}</td>
            <td>{{item.kgtycs}}</td>
            <td>{{item.xztycs}}</td>
            <td>{{item.pdtycs}}</td>
            <td>{{item.tktycs}}</td>
            <td>
              <button type="button" class="op-btn">查看详情</button>
            </td>
          </tr>
        </table>
      </div>
      <div v-else>
        <div id="unBox" style="height: 500px"></div>
      </div>
    </div>

  </div>

</template>

<style scoped lang="scss">
$color: #0048e5;
.tab-nav{
  width: 457px;
  background: #ffffff;
  border: 1px solid #dbe7ec;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 6px 9px;
  li{
    width: 140px;
    height: 28px;
    border-radius: 4px;
    font-size: 16px;
    color: #666;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
    &+li{
      margin-left: 10px;
    }
    &.selected{
      background: #e2eaf9;
      color: #000;
    }
  }
}
.data-table {
  width: 100%;
  table-layout: fixed;

  tr:nth-child(even) {
    background: #F1F7FF;
  }

  th {
    height: 74px;
    background: $color;
    font-weight: normal;
    text-align: center;
    font-size: 16px;
    color: #fff;
    &:first-child{
      border-radius: 6px 0 0 0;
    }
    &:last-child{
      border-radius: 0 6px 0 0;
    }
  }

  td {
    padding: 15px 0;
    font-size: 16px;
    color: #474747;
    text-align: center;
  }
}

.no-data {
  width: 100%;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;

  .no-data-img {
    width: 233px;
    height: 199px;
    background: url("/images/no-data.png") center no-repeat;
  }
}
.op-btn {
  width: 82px;
  height: 30px;
  background: #fff;
  border: 1px solid #003eee;
  border-radius: 2px;
  font-size: 14px;
  color: #003eee;
  text-align: center;
  &:disabled{
    background: #ccc;
    border-color: #ccc;
    color: #fff;
    pointer-events: none;
  }
}
.sub-nav{
  width: 280px;
  height: 30px;
  display: flex;
  li{
    width: 50%;
    background: #ffffff;
    font-size: 16px;
    color: #000;
    border: 1px solid #dbe7ec;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    &.selected{
      border-radius: 4px!important;
      background:#003eee;
      border-color: #003eee;
      color: #fff;
    }
    &:first-child{
      border-right: 0;
      border-radius: 4px 0 0 4px;
    }
    &:last-child{
      border-left: 0;
      border-radius: 0 4px 4px 0;
    }
  }
}
</style>